﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MenuTree.aspx.cs" Inherits="ZLCMS.Web.SystemManage.weixin.Menu.MenuTree" %>
<%@ Register src="/SystemManage/weixin/Material/SetMaterialControl.ascx" tagname="SetMaterialControl" tagprefix="uc1" %>

<div class="pageContent">   
   	<div class="panelBar">
		<ul class="toolBar">           
            <li><a class="icon" href="javascript:void(0)" onclick="navTab.reload();" title="刷新菜单"><span>刷新菜单</span></a></li>

            <li><a class="icon" href="javascript:void(0)" onclick="updateMenu()" title="将菜单同步到微信公众平台"><span>同步菜单</span></a></li>
		</ul>
	</div>

    <div class="unitBox" style="float:left; display:block; overflow:auto; width:358px;">
<div class="pageHeader" style="border:1px #B8D0D6 solid">
	<div class="searchBar">
		<table class="searchContent" width="100%">
			<tr>
				<td width="300px"><h3>菜单</h3>
				</td>
			</tr>
		</table>
	</div>
</div>
		
        
<div class="pageContent" style="border:1px #B8D0D6 solid;"  layoutH="70">

<div class="pageFormContent" layoutH="128">
<ul class="ztree" id="menu_tree" setting='
{
	view: {
		addHoverDom: addHoverDom,
		removeHoverDom: removeHoverDom,
		selectedMulti: false
	},
    data: {
		key: {
			name: "ItemText"
		},
		simpleData: {
			enable: true,
			idKey: "Id",
			pIdKey: "ParentId"
		},
		keep: {
			parent: false,
			leaf: false
		}
	},
	async: {
		enable: true,
		type: "post",
		url: "/SystemManage/weixin/Menu/TreeInterface.aspx?opt=load_data",
        otherParam: ["temp", new Date().valueOf()]
	},
    edit: {
		enable: true,
		editNameSelectAll: false,
		showRemoveBtn: true,
		showRenameBtn: true,
		removeTitle: "删除",
		renameTitle: "修改"
	},
	callback: {
		beforeDrag: function (treeId, treeNodes) {
			return false;
		},
        onAsyncSuccess:function(event, treeId, treeNode, msg){
            $.fn.zTree.getZTreeObj(treeId).expandAll(true);
        },
        beforeRename: function(treeId, treeNode, newName, isCancel){
            
            $.get("/SystemManage/weixin/Menu/TreeInterface.aspx", {opt:"update", ItemText:newName, ParentId:treeNode.ParentId, Id:treeNode.Id, temp:new Date().valueOf()}, function(data){
                var obj=$.parseJSON(data);
                treeNode.ItemText = obj.ItemText;
                $.fn.zTree.getZTreeObj(treeId).updateNode(treeNode);
                alertMsg.correct("操作成功");
            });
            return true;
        },
        beforeRemove:function(treeId, treeNode){
            alertMsg.confirm("请确认删除当前菜单项", {
                okCall: function() {
                    $.get("/SystemManage/weixin/Menu/TreeInterface.aspx", {opt:"remove", Id:treeNode.Id, temp:new Date().valueOf()}, function(data){
                        $.fn.zTree.getZTreeObj(treeId).removeChildNodes(treeNode);
                        $.fn.zTree.getZTreeObj(treeId).removeNode(treeNode);
                        alertMsg.correct("操作成功");
                    }); 
                }
            });
            return false;
        },
        onClick:function(event, treeId, treeNode, clickFlag){            
            $("#matfield_ttl").val("");
            $("#matfield").val("");
            $(".noselect",navTab.getCurrentPanel()).hide();
            $(".select",navTab.getCurrentPanel()).show();
            $("#ItemSort",navTab.getCurrentPanel()).val(treeNode.ItemSort);
            $("#ItemType",navTab.getCurrentPanel()).val(treeNode.ItemType);
            onChangeValue(treeNode.ItemValue);
            if(treeNode.ItemType == "click"){
                $.get("/SystemManage/weixin/Material/LoadMaterial.aspx", {uid:treeNode.ItemValue, temp:new Date().valueOf()}, function(data){
                    try{
                        var obj=$.parseJSON(data);   
                        $("#matfield_ttl", navTab.getCurrentPanel()).val(obj.Title);
                    }catch(e){}
                }); 
            }
            $("#Id",navTab.getCurrentPanel()).val(treeNode.Id);
            if(treeNode.isParent){
                $(".pselect",navTab.getCurrentPanel()).show(); 
                $(".cselect",navTab.getCurrentPanel()).hide();                
            }else{
                $(".pselect",navTab.getCurrentPanel()).hide(); 
                $(".cselect",navTab.getCurrentPanel()).show(); 
            }
        }
	}
}
'/>
</div>
<div class="formBar">
	    <ul>
			<li>
	        <div class="buttonActive"><div class="buttonContent"><button onclick="addItem('menu_tree')" type="button">添加菜单</button></div></div>
            </li>
		</ul>
</div>
<script type="text/javascript">
    function addItem(treeId, parentNode) {
        var pid = 0;
        if (parentNode) {
            pid = parentNode.Id;
        }
        $.get("/SystemManage/weixin/Menu/TreeInterface.aspx", { opt: "add", ItemText: "新的菜单", ParentId: pid, temp: new Date().valueOf() }, function (data) {
            var zTree = $.fn.zTree.getZTreeObj(treeId);
            if (parentNode) {
                zTree.addNodes(parentNode, $.parseJSON(data));
            } else {
                zTree.addNodes(null, $.parseJSON(data));
            }
        });
    }

    function addHoverDom(treeId, treeNode) {
        var sObj = $("#" + treeNode.tId + "_span");
        if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
        var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
				+ "' title='增加子菜单' onfocus='this.blur();'></span>";
        sObj.after(addStr);
        var btn = $("#addBtn_" + treeNode.tId);
        if (btn) btn.bind("click", function () {
            addItem(treeId, treeNode);
            return false;
        });
    };
    function removeHoverDom(treeId, treeNode) {
        $("#addBtn_" + treeNode.tId).unbind().remove();
    };

    function updateMenu() {

        alertMsg.confirm("请确认提交", {
            okCall: function () {
                var itemVal = '';
                if ($("#ItemType", navTab.getCurrentPanel()).val() == 'view') {
                    itemVal = $('#urlfield', navTab.getCurrentPanel()).val();
                } else if ($("#ItemType", navTab.getCurrentPanel()).val() == 'click') {
                    itemVal = $('#matfield', navTab.getCurrentPanel()).val();
                }

                $.get("/SystemManage/weixin/Menu/TreeInterface.aspx", { opt: "update_weixin", temp: new Date().valueOf() }, function (data) {
                    try {
                        var obj = $.parseJSON(data);
                        if (obj.errcode == '0') {
                            alertMsg.correct("操作成功");
                        } else {
                            alertMsg.error(obj.errmsg);
                        }
                    } catch (e) {
                        alertMsg.error("更新失败");
                    }
                });
            }
        });
    }


</script>

 
</div>
      

	</div>
	
<div class="unitBox" style="margin-left:360px;">
	<div class="pageHeader" style="border:1px #B8D0D6 solid">
	<div class="searchBar">
		<table class="searchContent">
			<tr>
				<td><h3>详细设置</h3>
				</td>

			</tr>
		</table>
	</div>
</div>	


<div class="pageContent" style="border:1px #B8D0D6 solid;"  layoutH="70">

<div class="pageFormContent" layoutH="128">
        <div class="noselect" style="margin:20px;line-height: 22px;">
        你需要在左侧新建或选中一个菜单，然后开始为其设置响应动作。 
        <br /> 
        <br />
        注意： 
        <br />
        1、一级菜单必须为2~3个按钮，不超过4个汉字；二级菜单必须为2~5个按钮，子菜单不超过10个汉字。
        <br />
        2、完成菜单设置后，须点击【同步菜单】按钮将配置好的菜单上传到微信服务器上使用。
        <br />
        3、更新自定义菜单后，由于微信客户端缓存，需要24小时微信客户端才会展现出来。建议测试时可以尝试取消关注公众账号后，再次关注，则可以看到创建后的效果。 
        </div>
        <div class="select" style="display:none;">        
        <dl class="nowrap">
            <dt>菜单排序：</dt>
            <dd>
                <input id="ItemSort" type="text" /></dd>
        </dl>
        <div class="divider"/>
        <h2 class="contentTitle">动作设置</h2>
        <div class="pselect" style="display:none;text-align:center;margin-top:50px;color:#545454">
            已有子菜单，无法设置动作  
        </div> 
        <div class="cselect" style="display:none;">
            <dl class="nowrap">
            <dt>动作类型：</dt>
            <dd>
                <select id="ItemType" onchange="onChangeValue()" style="width:150px">
                    <option value="-1">--请选择--</option>
                    <option value="click">点击推事</option>
                    <option value="view">跳转URL</option>
                    <option value="scancode_push">扫码推事件</option>
                    <option value="scancode_waitmsg">扫码推事件且弹出“消息接收中”提示框</option>
                    <option value="pic_sysphoto">弹出系统拍照发图</option>
                    <option value="pic_photo_or_album">弹出拍照或者相册发图</option>
                    <option value="pic_weixin">弹出微信相册发图器</option>
                    <option value="location_select">弹出地理位置选择器</option>
                </select>
            </dd>
            </dl>
            <dl class="nowrap urlfield">
            <dt>链接地址：</dt>
            <dd>
                <textarea id="urlfield" type="text" style="width:350px" />       
        <span style="color:red">若为外部链接，则必须以http:// 开头</span>
            </dd>
            </dl>
            <dl class="nowrap urlfield">
            <dt>&nbsp;</dt>
            <dd>
            <a class="button" height="600" width="800" minable="false" maxable="false" mask="true" max="false" title="微网站链接" rel="ShowPageListDialog" target="dialog" href="/SystemManage/Template/Web/ShowPageListDialog.aspx">
                <span>查看微网站链接</span>
            </a>
            </dd>
            </dl>
            <dl class="nowrap matfield">
            <dt>选择素材：</dt>
            <dd>
                <uc1:SetMaterialControl ID="SetMaterialControl1" runat="server" /></dd>
            </dl>

            <input id="Id" type="hidden" />
        </div> 
        </div>
</div>
<div class="formBar">
	    <ul>
			<li>
	        <div class="buttonActive"><div class="buttonContent"><button onclick="submitMenuItem();" type="button">提交</button></div></div>
            </li>
		</ul>
</div>
</div>
<script type="text/javascript">
    function onChangeValue(itemVal) {
        var val = $('#ItemType', navTab.getCurrentPanel()).val();
       
        if (val == 'view') {
            $('.urlfield', navTab.getCurrentPanel()).show();
            $('.matfield', navTab.getCurrentPanel()).hide();
            if (itemVal) {
                $('#urlfield', navTab.getCurrentPanel()).val(itemVal);
            }
        } else if (val == 'click') {
            $('.urlfield', navTab.getCurrentPanel()).hide();
            $('.matfield', navTab.getCurrentPanel()).show();
            if (itemVal) {
                $('#urlfield', navTab.getCurrentPanel()).val('');
                $('#matfield', navTab.getCurrentPanel()).val(itemVal);
            }
        }
         else {
            $('.urlfield', navTab.getCurrentPanel()).hide();
            $('.matfield', navTab.getCurrentPanel()).hide();
        }
    }

    function submitMenuItem() {
        //alertMsg.confirm("请确认提交", {
         //   okCall: function () {
                var itemVal = '';
                if ($("#ItemType", navTab.getCurrentPanel()).val() == 'view') {
                    itemVal = $('#urlfield', navTab.getCurrentPanel()).val();
                } else if ($("#ItemType", navTab.getCurrentPanel()).val() == 'click') {
                    itemVal = $('#matfield', navTab.getCurrentPanel()).val();
                }

                $.get("/SystemManage/weixin/Menu/TreeInterface.aspx", { opt: "update_ex", Id: $("#Id", navTab.getCurrentPanel()).val(),
                    ItemSort: $("#ItemSort", navTab.getCurrentPanel()).val(),
                    ItemType: $("#ItemType", navTab.getCurrentPanel()).val(),
                    ItemValue: itemVal,
                    temp: new Date().valueOf()
                }, function () {
                    var treeObj = $.fn.zTree.getZTreeObj('menu_tree');
                    var nodes = treeObj.getNodesByParam("Id", $("#Id", navTab.getCurrentPanel()).val(), null);
                    if (nodes.length == 1) {
                        nodes[0].ItemValue = itemVal;
                    }
                    alertMsg.correct("操作成功");
                });
           // }
        //});
    }

</script>
</div>
	
</div>